import React, { FC,useEffect,useState} from 'react';
import { Text, View,Button,Image,getLaunchOptionsSync,getAI2AgentVariableAgentVariableList} from '@ray-js/ray';
import styles from './index.module.less';
import ball from '../../assets/images/tab/ball.png';



export default function MeetPopup(props){

  const close=()=>{
    props.onClose();
  }

  const [Myname,setMyname]=useState('');
  useEffect(()=>{

    const {query: { deviceId }} = getLaunchOptionsSync();
    const FetchVariable=async()=>{
      try{
        const newVariables = await getAI2AgentVariableAgentVariableList({  
          devId: deviceId,  
        });
        const call = newVariables.find(user => user.variableKey === 'custom.call')?.variableValue;
        setMyname(`${call}的球球`);
      } catch(error){
        setMyname('主人的球球');
      }
    }
    FetchVariable();
  })

    return (
        <>
          <View className={styles.bg}>
            <Text className={styles.meet_font}>我们心有灵犀!</Text>
            <View className={styles.circle_container}>
              <View className={styles.shadow}></View>
              <View className={styles.box}>
                <View className={styles.circle}>
                  <Image src={ball} className={styles.Ball}></Image>
                </View>
                <Text className={styles.text1}>{Myname}</Text>
              </View>
              <View className={styles.box}>
                <View className={styles.circle}>
                  <Image src={ball} className={styles.Ball}></Image>
                </View>
                <Text className={styles.text1}>{props.userName}的{props.FriendBallName}</Text>
              </View>
            </View>

            <Button className={styles.know_btn} onClick={close}>我知道了</Button>
          </View>
        </>
      );
}

